<!--

type
prop
label
width
fixWidth 固定宽
slot
align
fixed
sortable
children
prophtml

-->
<template>
  <div class="matrix-table">
    <el-table  v-loading="loading"  :data="dataList" :default-sort="sortObj" @sort-change='sortTableFun' :header-cell-style="headerStyle" :max-height="heightStr"  @selection-change="onSelectionChange">
      <template v-for="({ type, prop, label, width, slot, align, fixed, sortable, fixWidth, children, prophtml }, index) in config">
        <el-table-column
            :key="index"
            :label="label"
            :type="type"
            :width="width"
            :align="align"
            v-if="type"
        ></el-table-column>
        <el-table-column
            :key="index"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :fixed="fixed"
            :align="align"
            :sortable="sortable"
            v-else-if="slot"
        >
          <template slot-scope="scope">
            <el-image v-if="slot === 'image'" :src=scope.row.imageArr[0] :preview-src-list=scope.row.imageArr></el-image>
            <el-image v-if="slot === 'firstImage'" :src=scope.row.firstImageArr[0] :preview-src-list=scope.row.firstImageArr></el-image>
            <el-image v-if="slot === 'detailImage'" :src=scope.row.detailImageArr[0] :preview-src-list=scope.row.detailImageArr></el-image>
            <el-image v-if="slot === 'images'" :src=imageArr[scope.$index] :preview-src-list=imageArr></el-image>
            <el-image v-if="slot === 'imageMain'" :src=scope.row.mainImage ></el-image>
            <el-image v-if="slot === 'mainImage'" :src=scope.row.image ></el-image>
            <el-input v-if="slot === 'index'" v-model="scope.$index" placeholder="请输入内容"></el-input>
            <el-input v-if="slot === 'input'" v-model="scope.row.goodsNo" placeholder="请输入内容"></el-input>
            <p v-if="slot === 'money'">{{ scope.row.moneyFormat }}</p>
            <el-link v-if="slot === 'button'" type="primary" @click="onOperateEmit('receiveData', scope.row, 'details')">查看详情</el-link>
            <el-link v-if="slot === 'button'" type="primary" @click="onOperateEmit('receiveData', scope.row, 'edit')">编辑</el-link>
            <el-link v-if="slot === 'operation'" type="primary" @click="onOperateEmit('receiveData', scope.row, 'edit')">编辑</el-link>
            <el-link v-if="slot === 'details'" type="primary" @click="onOperateEmit('receiveData', scope.row, 'details')">查看详情</el-link>
            <!-- 提现管理操作按钮 -->
            <div class="operation">
              <el-link v-if="slot === 'money' && scope.row.applyStatus === 2 && parArray.indexOf('commissionApply_payment') > -1" type="primary" @click="withdraw('withdraw', scope.row,'withdraw')">打款</el-link>
              <el-link v-if="slot === 'money' && scope.row.applyStatus === 1" type="primary" @click="withdrawPass('withdrawPass', scope.row,'withdrawPass')">通过</el-link>
              <el-link v-if="slot === 'money' && scope.row.applyStatus === 1" type="primary" @click="withdrawNoPass('withdrawNoPass', scope.row,'withdrawNoPass')">不通过</el-link>
            </div>
            <!-- 礼包名称 -->
            <p v-if="slot === 'giftName'" :title="scope.row.name" class="line-clamp">{{scope.row.name}}</p>

            <p v-if="slot === 'html'" v-html="scope.row.goodsNo + '<br>' + scope.row.categoryName"></p>
            <!--            <p v-if="slot === 'button'">测试一下</p>-->
            <p v-if="slot === 'payPlaceOrderNum'">{{ scope.row.payPlaceOrderNum }}</p>
            <p v-if="slot === 'approveOrderNum'">{{ scope.row.approveOrderNum }}</p>
            <!-- 商品名称 -->
            <div v-if="slot === 'goodsNames'">
              <ul class="goods-names" v-if="scope.row.goodsNames">
                <li v-for="(item, index) in scope.row.goodsNames" :key="index">{{ item?item:'-' }}</li>
              </ul>
              <p v-else>-</p>
            </div>
            <!-- 商品名称 -->
            <div v-if="slot === 'platformName'">
              <ul class="goods-names">
                <li v-for="(item, index) in scope.row.platformName" :key="index">{{ item }}</li>
              </ul>
            </div>
            <!-- 佣金 -->
            <p v-if="slot === 'proportion'">
              {{ scope.row.firstCommissionProportion }}%、{{ scope.row.secondCommissionProportion }}%、{{ scope.row.thirdCommissionProportion }}%
            </p>
            <!-- 有效期-->
            <p v-if="slot === 'validityTime'">
              {{ scope.row.validityStartTime }}<br>
              {{ scope.row.validityEndTime }}
            </p>
            <p v-if="slot === 'customer'">{{ scope.row.customerName }}</p>
            <p v-if="slot === 'customer'">{{ scope.row.customerPhone }}</p>
             <!-- 提现管理 -->
            <p v-if="slot === 'approvedName'">审核人：{{ scope.row.approvedName?scope.row.approvedName:'-' }}</p>
            <p v-if="slot === 'approvedName'">审核时间：{{ scope.row.approvedTime?scope.row.approvedTime:'-' }}</p>
            <p v-if="slot === 'paymentName'">打款人：{{ scope.row.paymentName?scope.row.paymentName:'-' }}</p>
            <p v-if="slot === 'paymentName'">打款时间：{{ scope.row.paymentTime?scope.row.paymentTime:'-'}}</p>
            <p v-if="slot === 'isStatus'">{{ scope.row.status==1?'是':'否'}}</p>
            <div v-if="slot === 'accountNo'">
              <p>账号：{{ scope.row.accountNo?scope.row.accountNo:'-'}}</p>
              <p>开户行：{{ scope.row.bankName?scope.row.bankName:'-'}}</p>
              <p>姓名：{{ scope.row.name?scope.row.name:'-'}}</p>
            </div>

            <!-- 佣金详情 -->
            <p v-if="slot === 'customerMessage'">{{ scope.row.customerName?scope.row.customerName:'-'}}</p>
            <p v-if="slot === 'customerMessage'">{{ scope.row.customerPhone}}</p>
            <p v-if="slot === 'masterName'">{{ scope.row.masterName}}</p>
            <p v-if="slot === 'masterName'">{{ scope.row.masterPhone}}</p>
            <p v-if="slot === 'receivableAmount'">总价：￥{{ scope.row.receivableAmount?scope.row.receivableAmount:'-'}}</p>
            <p v-if="slot === 'receivableAmount'">已收：￥{{ scope.row.receivedAmount?scope.row.receivedAmount:'-'}}</p>
            <p v-if="slot === 'receivableAmount'">未收：￥{{ scope.row.collectionAmount?scope.row.collectionAmount:'-'}}</p>
            <p v-if="slot === 'commissionAmount'">￥{{ scope.row.commissionAmount?scope.row.commissionAmount:'-'}}</p>
            <p v-if="slot === 'orderTime'">{{ scope.row.orderTime?scope.row.orderTime:'-'}}</p>

            <!-- 积分详情 -->
            <p v-if="slot === 'customerName'">{{ scope.row.customerName}}</p>
            <p v-if="slot === 'customerName'">{{ scope.row.customerPhone}}</p>
            <!-- 跳转配置 -->
            <div v-if="slot === 'platformName'">
                <p v-for="(item, index) in scope.row.platformList" :key="index">{{ item.platformName }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :align="align"
            :sortable="sortable"
            v-else-if="children"
        >
          <el-table-column
              v-for="(itemchildren, indexchildren) in children"
              :key="indexchildren"
              :prop="itemchildren.prop"
              :min-width="itemchildren.width"
              :width="itemchildren.fixWidth"
              :label="itemchildren.label"
              show-overflow-tooltip
              :align="itemchildren.align"
              :sortable="itemchildren.sortable"
          ></el-table-column>
        </el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :align="align"
            :sortable="sortable"
            v-else
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'MatrixTable',
  props: {
    sortObj: { // 排序
      type: Object,
      default: () => {
      }
    },
    config: {
      type: Array,
      default: () => []
    },
    dataList: { // 数据列表
      type: Array,
      default: () => []
    },
    heightStr: { // 数据列表 高度
      type: String,
      default: () => '888'
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null,
	  parArray:[]
    }
  },
  watch: {
    $route () {
      // this.testFun();
    }
  },
  mounted () {
    this.$nextTick(_ => {})
  },
  created () {
    // this.testFun()
	let limits = JSON.parse(sessionStorage.getItem('limit'))
	const params = limits.buttonTreeDto.filter(
	  (item) => item.menuCode === "withdrawMoneyCode"
	)
	
	params[0].buttonList.forEach((item) => {
	  this.parArray.push(item.code)
	})
	console.log('limits',this.parArray)
  },
  methods: {
    /**
     *
     * @param emitFanStr 组件外部方法
     * @param row 需要操作的数据
     * @param type 父级执行外部方式时使用
     */
    onOperateEmit (emitFanStr, row, type) {
      const outputData = { row, type }
      this.$emit(emitFanStr, outputData)
      // console.log('onShowDetail - 查看', row)
    },
    onSelectionChange (val) { // 多选
      this.$emit('tableSelectionChange', val)
    },
    // 打款
    withdraw (emitFanStr, row, type) {
      const outputData = { row, type }
      this.$emit(emitFanStr, outputData)
    },
    // 提现通过
    withdrawPass (emitFanStr, row, type) {
      const outputData = { row, type }
      this.$emit(emitFanStr, outputData)
    },
    // 提现不通过
    withdrawNoPass (emitFanStr, row, type) {
      const outputData = { row, type }
      this.$emit(emitFanStr, outputData)
    },
    // 表格表头合并
    headerStyle ({ row, rowIndex }) {},
    sortTableFun (column) {
      console.log('sortTableFun 排序', column)
    }
  }
}
</script>
<style lang="scss">
.matrix-table {
  width: 100%;
  color: #333333;

  .el-table {
    //固定栏
    thead {
      color: #333333;
      th.el-table__cell{
        background-color: #f8f8f8;
        //&:last-child{
        //  background-color: #F4F7FC;
        //}
      }
    }

    .el-table__header-wrapper {
      .has-gutter {
        color: #333333;
        .el-table__cell {
          //background-color: #F4F7FC;

          .cell {
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
    }

    .el-table__body-wrapper, .el-table__body {
      .el-table__row {
        .el-table__cell {
          .cell {
            color: #333333;
            font-size: 14px;
          }

          &:first-child {
            .cell {
              //color: #4168E7;
            }
          }
        }

        /deep/ .is-center {
          //background-color: #2D7EDF;
        }

        &:nth-child(even) {
          //background-color: #F4F7FC;
        }
      }
    }
  }
  .el-image{
    width: 60px;
    height: 60px;
  }
}
.operation{
  //display: flex;
  //justify-content: space-between;
  a{
    display: inline-block;
    min-width: 50px;
  }
}
//固定栏
//.el-table--enable-row-transition .el-table__body .el-table__row {
//  &:nth-child(even){
//    td.el-table__cell{
//      background-color: #F4F7FC;
//    }
//  }
//}
.goods-names{
  li{
    text-align: left;
    border-bottom: 1px solid #b3b3b3;
    padding: 5px 0;
    &:last-child{
      border-bottom:none;
    }
  }
}

.line-clamp {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
